<script type="text/x-template" id="cider-groupings">
    <div class="content-inner">
        <template v-if="data != null">
            <h1 class="header-text">{{data.attributes?.name}}</h1>

            <template v-if="data.relationships && data.relationships.tabs">
                <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
                    <div class="row">
                        <div class="col" v-if="recom.attributes.name != 'Chart Set'">
                            <h3>{{ recom.attributes.name ?? ""}}</h3>
                        </div>
                        <div class="col-auto cider-flex-center"
                             v-if="index != 0 && recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
                            <button class="cd-btn-seeall" v-if="recom.relationships.room"
                                    @click="app.showRoom(recom.relationships.room?.data[0].href)">
                                {{app.getLz('term.seeAll')}}
                            </button>
                            <button class="cd-btn-seeall" v-else
                                    @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')">
                                {{app.getLz('term.seeAll')}}
                            </button>
                        </div>
                    </div>
                    <template
                            v-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
                        <template
                                v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
                            <mediaitem-scroller-horizontal-mvview :imagesize="800"
                                                                  :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)"
                                                                  :kind="recom.attributes.editorialElementKind"
                                                                  :items="recom.relationships.children ? recom.relationships.children.data : recom.relationships.contents.data"></mediaitem-scroller-horizontal-mvview>
                        </template>
                        <template v-else-if="(['327']).includes(recom.attributes.editorialElementKind)">
                            <div class="mediaitem-list-item__grid">
                                <listitem-horizontal :items="recom.relationships.contents.data.limit(20)">
                                </listitem-horizontal>
                            </div>
                        </template>
                        <template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
                            <mediaitem-scroller-horizontal-mvview :imagesize="800"
                                                                  :kind="recom.attributes.editorialElementKind"
                                                                  :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                        </template>
                        <template v-else-if="recom.attributes.name == 'Chart Set'">
                            <!-- ignored -->
                        </template>
                        <template v-else>
                            <mediaitem-scroller-horizontal-large
                                    :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
                        </template>
                    </template>
                    <template v-else>
                        <template
                                v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
                            <div class="grouping-container">
                                <button class="grouping-btn" @click="$root.goToGrouping(link.url)"
                                        v-for="link in recom.attributes.links">{{ link.label }}
                                </button>
                            </div>
                        </template>
                    </template>
                </template>
            </template>
        </template>
    </div>
</script>

<script>
  Vue.component("cider-groupings", {
    template: "#cider-groupings",
    data: function() {
      return {
        data: null,
        app: this.$root,
        query: "",
      };
    },
    async mounted() {
      const queryDefaults = {
        "platform": "web",
        "l": this.$root.mklang,
        "extend": "editorialArtwork,artistUrl",
        "omit[resource:artists]": "relationships",
        "include[groupings]": "curator",
        "include[albums]": "artists",
        "include[songs]": "artists",
        "include[music-videos]": "artists",
        "fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
      }
      const hash = window.location.hash;
      // get everything after the first / character but keep everything afterwards
      const query = hash.substring(hash.indexOf("/") + 1, hash.indexOf("&") > 0 ? hash.indexOf("&") : hash.length);
      this.query = query;
      // if(!this.query.includes("?")) {
      //   this.query += queryDefaults;
      // }
      console.debug(query);
      const result = await this.$root.mk.api.v3.music(
        `/v1/editorial/${this.$root.mk.storefrontId}/groupings/${this.query}`
        , !this.query.includes("&") ? queryDefaults : { "platform": "web" });
      this.data = result.data.data[0];

      console.log(this.data);

      //this.$root.getBrowsePage();
    },
  });
</script>
